<template>
  <div class="">
    <TableForm
      :model-data="modelData"
      :data="formData"
      @onSearch="onSearch"
      @onReset="onReset"
    />
    <TablePublic
      :is-index="true"
      :reset-table="resetTable"
      :params="params"
      :table-api="tableApi"
      :columns="columns"
      :toolData="toolData"
      @onToolClick="onToolClick"
      @onBtnClick="onBtnClick"
      @paginaOnChange="paginaOnChange"
    >
      <template v-slot:counsellorItemVOList="data">
        <div
          v-for="item in Array.isArray(data.item.counsellorItemVOList)
            ? data.item.counsellorItemVOList
            : []"
          :key="item.counsellorName + item.counsellorPhone"
        >
          {{ item.counsellorName }} - {{ item.counsellorPhone }}
        </div>
      </template>
    </TablePublic>
    <CreateModal
      v-if="createVisible"
      :visible="createVisible"
      @onHide="createOnHide"
      @onOk="createOnOk"
      :item="currentItem"
      :type="type"
    />
  </div>
</template>

<script>
import TableForm from "@/components/TableForm/index.vue";
import TablePublic from "@/components/TablePublic/index.vue";
import CreateModal from "./CreateModal.vue";
import { getAddressList, delAddress } from "@/api/address-info-manage.js";
export default {
  components: {
    TableForm,
    TablePublic,
    CreateModal,
  },
  data() {
    return {
      modelData: {
        addressName: "",
      },
      formData: [
        {
          type: "input",
          name: "addressName",
          label: "地址",
          placeholder: "请输入地址",
        },
        // {
        //   type: "input",
        //   name: "cityName",
        //   label: "市",
        //   placeholder: "请输入市",
        // },
        // {
        //   type: "input",
        //   name: "countyName",
        //   label: "区",
        //   placeholder: "请输入区",
        // },
      ],
      currentItem: {},
      toolData: [
        {
          label: "新增",
          type: "add",
          per: "maintain_add",
        },
      ],
      columns: [
        {
          label: "操作",
          prop: "handle",
          buttons: [
            {
              label: "编辑",
              type: "edit",
            },
            {
              label: "删除",
              type: "del",
              color: "red",
            },
          ],
          width: "190",
        },
        { label: "地址", prop: "addressName" },
        // { label: "市", prop: "cityName" },
        // { label: "区", prop: "countyName" },
        {
          label: "代理商信息",
          prop: "counsellorItemVOList",
          slot: "counsellorItemVOList",
        },
      ],
      tableApi: getAddressList,
      resetTable: false,
      params: {
        pageSize: 10,
        page: 1,
      },
      createVisible: false,
      type: "",
    };
  },
  methods: {
    onSearch() {
      this.params = {
        ...this.params,
        ...this.modelData,
        page: 1,
      };
      this.getData();
    },
    onReset() {
      this.params = {
        ...this.modelData,
        pageSize: this.params.pageSize,
        page: 1,
      };
      this.getData();
    },
    onToolClick(data) {
      const { type } = data;
      this.btnType = type;
      switch (type) {
        case "add":
          this.createVisible = true;
          this.type = "add";
          break;
        default:
          break;
      }
    },
    onBtnClick(data) {
      const { btn, item } = data;
      const { type } = btn;
      if (type == "edit") {
        this.type = "edit";
        this.createVisible = true;
        this.currentItem = item;
      } else if (type == "del") {
        const { id } = item;
        delAddress({
          ids: [id],
        }).then((res) => {
          this.getData();
          this.$message.success("删除成功");
        });
      }
    },
    paginaOnChange(data) {
      const { limit, page } = data;
      this.params = {
        ...this.params,
        page,
        pageSize: limit,
      };
      this.getData();
    },
    getData() {
      this.resetTable = !this.resetTable;
    },
    createOnOk() {
      this.createOnHide();
      this.getData();
    },
    createOnHide() {
      this.createVisible = false;
      this.currentItem = {};
    },
  },
};
</script>
<style scoped lang="scss"></style>
